<template>
	<view class="register">
		<u-notify ref="uNotify" message=""></u-notify>
		<u-modal :show="modalvariate.modalshow" :title="modalvariate.modaltitle" :content='modalvariate.modalcontent'
			@confirm="modalConfirm"></u-modal>
		<view class="content">
			<!-- 主体 -->
			<view class="main">
				<u-form ref="uForm" errorType="border-bottom">
					<u-form-item borderBottom labelWidth="130rpx" label="头像" ref="item1">
						<u-upload :fileList="fileList" @afterRead="fileAfterRead" @beforeRead="fileBeforeRead"
							@delete="deletePic" name="3"  :maxCount="1"
							:previewFullImage="true"></u-upload>
					</u-form-item>
				</u-form>
			</view>

			<wButton class="wbutton" text="提交修改" @click="clickSubmit"></wButton>
		</view>
	</view>
</template>

<script>
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import {
		authorityControl
	} from '@/common/Token.js'
	import baseurl from '@/http/baseurl.js'
	import {
		updatePhotoApi
	} from '@/api/users.js'
	export default {
		name: 'ProfilePicture',
		components: {
			wButton,
		},
		data() {

			//u-modal 弹出层使用的变量
			const modalvariate = {
				modalshow: false,
				modaltitle: '',
				modalcontent: ''
			}
			//文件上传数据
			const fileList = []
			return {
				modalvariate,
				fileList
			}
		},
		methods: {
			//提交
			clickSubmit() {
				if(this.fileList.length <= 0){
					uni.$u.toast('请选择图片')
				}else{
					updatePhotoApi(this.fileList[0].url).then(res => {
						if(res.code == 1){
							this.$refs.uNotify.show({
								top: 10,
								type: 'success',
								message: '修改成功',
								safeAreaInsetTop: false
							})
							this.$store.dispatch('asyncSetUserInfoPhoto',this.fileList[0].url)
						}else{
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								message: res.msg,
								safeAreaInsetTop: false
							})
						}	
					})
				}
			},
			//文件读取后回调
			fileAfterRead(event) {
				uni.uploadFile({
					url: baseurl + '/api/FileUpload/AnFileUpload', //接口地址
					filePath: event.file.thumb,
					name: 'file', //后台对应的参数名
					header: {
						"Authorization": 'Bearer ' + this.$store.getters.getToken.token
					},
					success: (resdata) => {
						const res = JSON.parse(resdata.data)
						if(res.code == 1){
							this.$refs.uNotify.show({
								top: 10,
								type: 'success',
								message: '上传成功',
								safeAreaInsetTop: false
							})
							this.fileList.push({url:res.data.filepath})
						}else{
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								message: res.msg,
								safeAreaInsetTop: false
							})
						}	
					},
					fail(err) {
						this.$refs.uNotify.show({
							top: 10,
							type: 'error',
							message: err,
							safeAreaInsetTop: false
						})
						console.log(err, '接口调用失败')
					}
				})
			},
			//文件读取前回调
			fileBeforeRead() {
				console.log('fileBeforeRead')
			},
			//删除文件回调
			deletePic() {
				this.fileList = []
			}
		},
		onLoad() {
			//判断用户是否登录
			authorityControl()
		}
	}
</script>

<style>
	@import url("@/common/css/icon.css");
	@import url("@/common/css/main.css");
</style>